<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="d" uri="http://dgg.net/jsp/jstl/core" %>
<link rel="stylesheet" href="https://tstatic.dgg.net/src/dggui-3.0/css/dggui.css">
<head>
    <meta charset="UTF-8">
    <c:import url="../../header.jsp"/>
    <c:import url="../../footer.jsp"/>
    <link rel="stylesheet" href="${rootUrl}/static/css/time-status-color.css?v=${version}">
    <script> var ALLOT_REFUSED = '${ALLOT_REFUSED}';</script>
    <style>
        table.crm-table.cell-border tbody td{
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="content-warp pb50">
    <div class="bg-warp">
        <form id="underOrderForm">
            <c:if test="${!empty products}">
                <c:forEach items="${products}" var="product">
                    <c:if test="${isEdit == false}">
                        <div class="dggui-panel">
                            <h3>产品名称:${product.productName}</h3>
                            <table class="dggui-table cell-border table-form">
                                <thead>
                                <th style="text-align: center">证书类型</th>
                                <th style="text-align: center"><span class="red">*</span>证书专业</th>
                                <th style="text-align: center"><span class="red">*</span>证书等级</th>
                                <th style="text-align: center"><span class="red">*</span>是否有社保</th>
                                <th style="text-align: center"><span class="red">*</span>社保地区</th>
                                <th style="text-align: center"><span class="red">*</span>是否需要原件配合</th>
                                <th style="text-align: center"><span class="red">*</span>是否需要出场配合</th>
                                <th style="text-align: center">数量</th>
                                <th style="text-align: center">操作</th>
                                </thead>
                                <tbody id="${product.orderBusId}">
                                <c:forEach items="${underOders}" var="underOrder" varStatus="index">
                                    <c:if test="${product.orderBusId == underOrder.orderBusId}">
                                        <tr style="text-align: center" data-index="${index.count}">
                                            <input type="hidden" name="orderId" class="plug-in-msg" value="${orderId}"/>
                                            <input type="hidden" name="orderBusId" class="plug-in-msg" value="${underOrder.orderBusId}"/>
                                            <input type="hidden" name="productId" class="plug-in-msg" value="${underOrder.productId}"/>
                                            <td style="width: 300px">
                                                <select class="table-select certificateType" name="certificateType" id="certificateType${underOrder.orderBusId}${index.count}" onchange="loadCertificateType('100%','#certificateType${underOrder.orderBusId}${index.count}','${generalType}',1,'#certificateSpecialtys${underOrder.orderBusId}${index.count}',0,'#certificateLevel${underOrder.orderBusId}${index.count}')">
                                                    <option value=''>请选择</option>
                                                </select>
                                            </td>
                                            <td style="width: 300px">
                                                <select class="table-select" name="certificateSpecialtys" multiple="multiple" id="certificateSpecialtys${underOrder.orderBusId}${index.count}" onchange="checkCertificateSpecialty('#certificateType${underOrder.orderBusId}${index.count}','#certificateSpecialtys${underOrder.orderBusId}${index.count}')">
                                                    <option value="">请先选择证书类型</option>
                                                </select>
                                            </td>
                                            <td style="width: 150px">
                                                <select class="table-select" name="certificateLevel" id="certificateLevel${underOrder.orderBusId}${index.count}">
                                                    <option value="">请先选择证书类型</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="dggui-select" id="isSocialSecurity${underOrder.orderBusId}${index.count}" onchange="changeSocialSecurity(this)" name="isSocialSecurity" style="width: 50px">
                                                    <option value="0">是</option>
                                                    <option value="1">否</option>
                                                </select>
                                            </td>
                                            <td>
                                                <div class="bus-plugIn" class="socialSecurityArea" id="socialSecurityArea${underOrder.orderBusId}${index.count}">
                                                    <input type="hidden" name="socialSecurityAreaId" value="${underOrder.socialSecurityAreaId}" class="plug-in-msg"/>
                                                    <input type="hidden" name="socialSecurityArea" value="${underOrder.socialSecurityArea}" class="plug-in-code"/>
                                                    <input type="text" readonly placeholder="请选择" class="chose-plugIn layui-input" id="socialSecurityAreaChange${underOrder.orderBusId}${index.count}" value="${underOrder.socialSecurityArea}" name="socialSecurityAreaChange">
                                                    <div class="bus-picker">
                                                        <div class="bus-picker-tab">
                                                            <a href="javascript:void(0);" class="active">请选择</a>
                                                        </div>
                                                        <div class="bus-picker-content"></div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <select class="dggui-select" name="isNeedOriginal" id="isNeedOriginal${underOrder.orderBusId}${index.count}" style="width: 50px">
                                                    <option value="0">是</option>
                                                    <option value="1">否</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="dggui-select" name="isNeedAppearance" id="isNeedAppearance${underOrder.orderBusId}${index.count}" style="width: 50px">
                                                    <option value="0">是</option>
                                                    <option value="1">否</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" class="dggui-input" name="count" maxlength="2" value="${underOrder.count}" style="width: 50px">
                                            </td>
                                            <td>
                                                <a href="javascript:void(0)" class="dggui-icon-btn" onclick="removeTrRow(this)" title="删除"><i class="iconfont icon-shanchu"></i></a>
                                            </td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                                <tr>
                                    <td colspan="10" class="txt-center">
                                        <a href="javascript:void(0)" class="dggui-link dggui-icon-btn" onclick="addRow('${orderId}','${product.orderBusId}','${product.productId}',this,0)"><i class="iconfont icon-tianjia"></i><span>添加证书</span></a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </c:if>
                    <c:if test="${isEdit == true}">
                        <div class="dggui-panel">
                            <h3>产品名称:${product.productName}</h3>
                            <table class="dggui-table cell-border table-form">
                                <thead>
                                    <th style="text-align: center">证书类型</th>
                                    <th style="text-align: center"><span class="red">*</span>证书专业</th>
                                    <th style="text-align: center"><span class="red">*</span>证书等级</th>
                                    <th style="text-align: center"><span class="red">*</span>是否有社保</th>
                                    <th style="text-align: center"><span class="red">*</span>社保地区</th>
                                    <th style="text-align: center"><span class="red">*</span>是否需要原件配合</th>
                                    <th style="text-align: center"><span class="red">*</span>是否需要出场配合</th>
                                    <th style="text-align: center">数量</th>
                                    <th style="text-align: center">操作</th>
                                </thead>
                                <tbody id="${product.orderBusId}">
                                    <tr style="text-align: center" data-index="0">
                                        <input type="hidden" name="orderId" class="plug-in-msg" value="${orderId}"/>
                                        <input type="hidden" name="orderBusId" class="plug-in-msg" value="${product.orderBusId}"/>
                                        <input type="hidden" name="productId" class="plug-in-msg" value="${product.productId}"/>
                                        <td style="width: 300px">
                                            <select class="table-select" name="certificateType" id="certificateType${product.orderBusId}" onchange="loadCertificateType('100%','#certificateType${product.orderBusId}','${generalType}',1,'#certificateSpecialtys${product.orderBusId}',0,'#certificateLevel${product.orderBusId}')">
                                                <option value=''>请选择</option>
                                            </select>
                                        </td>
                                        <td style="width: 300px">
                                            <select class="table-select" name="certificateSpecialtys" multiple="multiple" id="certificateSpecialtys${product.orderBusId}" onchange="checkCertificateSpecialty('#certificateType${product.orderBusId}','#certificateSpecialtys${product.orderBusId}')">
                                                <option value="">请先选择证书类型</option>
                                            </select>
                                        </td>
                                        <td style="width: 150px">
                                            <select class="table-select" name="certificateLevel" id="certificateLevel${product.orderBusId}">
                                                <option value="">请先选择证书类型</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select class="dggui-select" name="isSocialSecurity" onchange="changeSocialSecurity(this)" style="width: 50px">
                                                <option value="0">是</option>
                                                <option value="1">否</option>
                                            </select>
                                        </td>
                                        <td>
                                            <div class="bus-plugIn" class="socialSecurityArea" id="socialSecurityArea${product.orderBusId}">
                                                <input type="hidden" name="socialSecurityAreaId" class="plug-in-msg"/>
                                                <input type="hidden" name="socialSecurityArea" class="plug-in-code"/>
                                                <input type="text" readonly placeholder="请选择" class="chose-plugIn layui-input" id="socialSecurityAreaChange${product.orderBusId}" name="socialSecurityAreaChange">
                                                <div class="bus-picker">
                                                    <div class="bus-picker-tab">
                                                        <a href="javascript:void(0);" class="active">请选择</a>
                                                    </div>
                                                    <div class="bus-picker-content"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <select class="dggui-select" name="isNeedOriginal" style="width: 50px">
                                                <option value="0">是</option>
                                                <option value="1">否</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select class="dggui-select" name="isNeedAppearance" style="width: 50px">
                                                <option value="0">是</option>
                                                <option value="1">否</option>
                                            </select>
                                        </td>
                                        <td><input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" class="dggui-input" name="count" maxlength="2" style="width: 50px"></td>
                                        <td>
                                            <a href="javascript:void(0)" class="dggui-icon-btn" onclick="removeTrRow(this)" title="删除"><i class="iconfont icon-shanchu"></i></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="10" class="txt-center">
                                            <a href="javascript:void(0)" class="dggui-link dggui-icon-btn" onclick="addRow('${orderId}','${product.orderBusId}','${product.productId}',this)"><i class="iconfont icon-tianjia"></i><span>添加证书</span></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </c:if>
                </c:forEach>
            </c:if>
        </form>
        <div>
            <span style="color: red">温馨提示：请完善证书信息，否则无法分单成功</span>
        </div>
    </div>
    <div class="txt-center">
        <button class="layui-btn layui-btn-orange" onclick="save('${orderId}')">保存</button>
    </div>
</div>
</body>
<c:import url="../../header.jsp"/>
<script src="${rootUrl}/static/js/zzsc/fine_edit_page.js?v=${version}"></script>
<script>
    $(function () {
        //初始化证书类型
        loadCertificateTypes('190px', "#certificateType", '${generalType}', 0);
        <c:if test="${isEdit == true}">
            <c:forEach items="${products}" var="product">
                <%--loadCertificateType('190px', "#certificateType${product.orderBusId}", '${generalType}', 0);--%>
                //异步加载
                Plug.plug_ins(
                    "get",
                    "${cmsBaseUrl}/api/cms/tree_book/v1/get_tree_book_list.do?code=2147483647&type=2&level=1",
                    "#socialSecurityArea${product.orderBusId}",
                    '请选择地区',
                    function () {
                    },
                    true, '2147483647'
                );
            </c:forEach>
        </c:if>
        <c:if test="${isEdit == false}">
            <c:forEach items="${underOders}" var="underOrder" varStatus="index">
                //初始化证书类型
                <%--loadCertificateType('190px', "#certificateType${underOrder.orderBusId}${index.count}", '${generalType}', 0);--%>
                //默认选中证书类型
                $('#certificateType${underOrder.orderBusId}${index.count}').val(${underOrder.certificateTypeId}).trigger("change");
                $('#certificateSpecialtys${underOrder.orderBusId}${index.count}').val(${underOrder.certificateSpecialtyId}).trigger("change");
                $('#certificateLevel${underOrder.orderBusId}${index.count}').val('${underOrder.certificateLevel}').trigger("change");
                $('#isSocialSecurity${underOrder.orderBusId}${index.count}').val(${underOrder.isSocialSecurity}).trigger("change");
                $('#isNeedOriginal${underOrder.orderBusId}${index.count}').val(${underOrder.isNeedOriginal}).trigger("change");
                $('#isNeedAppearance${underOrder.orderBusId}${index.count}').val(${underOrder.isNeedAppearance}).trigger("change");
                //异步加载
                Plug.plug_ins(
                    "get",
                    "${cmsBaseUrl}/api/cms/tree_book/v1/get_tree_book_list.do?code=2147483647&type=2&level=1",
                    "#socialSecurityArea${underOrder.orderBusId}${index.count}",
                    '请选择地区',
                    function () {
                    },
                    true, '2147483647'
                );
            </c:forEach>
        </c:if>
    });

    function changeSocialSecurity(obj){
        var input = $(obj).parent().next().children();
        if($(obj).val() == 1){
            input.children('input[name="socialSecurityArea"]').val("");
            input.children('input[name="socialSecurityAreaId"]').val("");
            input.children('input[name="socialSecurityAreaChange"]').val("");
            input.children('input[name="socialSecurityAreaChange"]').attr("disabled","disabled");
        }else{
            input.children('input[name="socialSecurityAreaChange"]').removeAttr("disabled");
        }
    }

    function addRow(orderId,orderBusId,productId,obj,type) {
        let trs = $('#'+orderBusId).find('tr');
        let keyNum = ($(trs[trs.length-2]).data('index') + 1) || 0;
        let num = orderBusId + keyNum;
        var trHtm='<tr style="text-align: center" data-index="'+keyNum+'">'+
            '<input type="hidden" name="orderId" class="plug-in-msg" value="'+orderId+'"/>'+
            '<input type="hidden" name="orderBusId" class="plug-in-msg" value="'+orderBusId+'"/>'+
            '<input type="hidden" name="productId" class="plug-in-msg" value="'+productId+'"/>'+
            '<td style="width: 300px">'+
            '<select class="table-select" name="certificateType" id="certificateType'+num+'" onchange="loadCertificateType(\'100%\',\'#certificateType'+num+'\',\'${generalType}\',1,\'#certificateSpecialtys'+num+'\',0,\'#certificateLevel'+num+'\')">'+
            '<option value="">请选择</option>'+
            '</select>'+
            '</td>'+
            '<td style="width: 300px">'+
            '<select class="table-select" name="certificateSpecialtys" multiple="multiple" id="certificateSpecialtys'+num+'" onchange="checkCertificateSpecialty(\'#certificateType'+num+'\',\'#certificateSpecialtys'+num+'\')">'+
            '<option value="">请先选择证书类型</option>'+
            '</select>'+
            '</td>'+
            '<td style="width: 150px">'+
            '<select class="table-select" name="certificateLevel" id="certificateLevel'+num+'">'+
            '<option value="">请先选择证书类型</option>'+
            '</select>'+
            '</td>'+
            '<td>'+
            '<select class="dggui-select" name="isSocialSecurity" onchange="changeSocialSecurity(this)" style="width: 50px">'+
            '<option value="0">是</option>'+
            '<option value="1">否</option>'+
            '</select>'+
            '</td>'+
            '<td>'+
            '<div class="bus-plugIn" class="socialSecurityArea" id="socialSecurityArea'+num+'">'+
            '<input type="hidden" name="socialSecurityAreaId" class="plug-in-msg"/>'+
            '<input type="hidden" name="socialSecurityArea" class="plug-in-code"/>'+
            '<input type="text" readonly placeholder="请选择" class="chose-plugIn layui-input" id="socialSecurityAreaChange'+num+'" name="socialSecurityAreaChange">'+
            '<div class="bus-picker">'+
            '<div class="bus-picker-tab">'+
            '<a href="javascript:void(0);" class="active">请选择</a>'+
            '</div>'+
            '<div class="bus-picker-content"></div>'+
            '</div>'+
            '</div>'+
            '</td>'+
            '<td>'+
            '<select class="dggui-select" name="isNeedOriginal" style="width: 50px">'+
            '<option value="0">是</option>'+
            '<option value="1">否</option>'+
            '</select>'+
            '</td>'+
            '<td>'+
            '<select class="dggui-select" name="isNeedAppearance" style="width: 50px">'+
            '<option value="0">是</option>'+
            '<option value="1">否</option>'+
            '</select>'+
            '</td>'+
            '<td><input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,\'\')}else{this.value=this.value.replace(/\\D/g,\'\')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,\'0\')}else{this.value=this.value.replace(/\\D/g,\'\')}" class="dggui-input" name="count" maxlength="2" style="width: 50px"></td>'+
            '<td>'+
            '<a href="javascript:void(0)" class="dggui-icon-btn" onclick="removeTrRow(this)" title="删除"><i class="iconfont icon-shanchu"></i></a>'+
            '</td>'+
            '</tr>';
        $(obj).parents('tr').before(trHtm);
        loadCertificateType('190px', '#certificateType'+num, '${generalType}', 0);
        //异步加载
        Plug.plug_ins(
            "get",
            "${cmsBaseUrl}/api/cms/tree_book/v1/get_tree_book_list.do?code=2147483647&type=2&level=1",
            "#socialSecurityArea"+num,
            '请选择地区',
            function () {
            },
            true, '2147483647'
        );
    }

    function removeTrRow(obj) {
        var num = $(obj).parent().parent().parent().children('tr').length;
        if(num == 2){
            DGG.Errors("请至少保留一项证书!");
            return;
        }else{
            $(obj).parents('tr').remove();
        }
    }
    //声明提示信息
    var nameKey = {"certificateType":"请选择证书类型！","certificateSpecialtys":"请选择证书专业！","certificateLevel":"请选择证书等级！","isSocialSecurity":"请选择是否有社保！","socialSecurityAreaId":"请选择社保地区！","socialSecurityArea":"请选择社保地区！","socialSecurityAreaChange":"请选择社保地区！","isNeedOriginal":"请选择是否需要原件配合！","isNeedAppearance":"请选择是否需要出场配合！","count":"请输入数量！"};

    function save(orderId) {
        var params = []
        var flag = true;
        //循环tr
        $('tr').each(function(i,element){
            //排除无data-index属性的tr
            if($(this).attr("data-index") != undefined && $(this).attr("data-index") != 'undefined'){
                var param ={};
                //循环含有name属性的DOM对象
                $(this).find("[name]").each(function(u,el){
                    var flagMsg = true;
                    //验证是否填写信息-提示方式
                    if(checkIsEmpty($(this).val())){
                        if($(this).attr('name') == "count"){
                            //文本框提示坐标锁定
                            layer.tips(nameKey[$(this).attr('name')],$(this));
                            flagMsg = false;
                        }else if($(this).attr('name') == "socialSecurityAreaId" || $(this).attr('name') == "socialSecurityArea" || $(this).attr('name') == "socialSecurityAreaChange"){
                            if($(this).parent().parent().prev().children('select').val() == 0){
                                //地域选择框提示坐标锁定
                                layer.tips(nameKey[$(this).attr('name')],$(this).parent().children("input[name='socialSecurityAreaChange']"));
                                flagMsg = false;
                            }
                        }else{
                            //选择框提示坐标锁定
                            layer.tips(nameKey[$(this).attr('name')],$(this).parent().children("span"));
                            flagMsg = false;
                        }
                        //参数未填写
                        if(!flagMsg){
                            alert(nameKey[$(this).attr('name')])
                            flag = false;
                            return false;
                        }
                    }
                    //参数处理
                    param[$(this).attr('name')]=$(this).val();
                    if($(this).attr('name') == 'certificateType' || $(this).attr('name') == 'certificateLevel'){
                        param[$(this).attr('name')+"Name"] = $(this).find("option:selected").text();
                    }else if($(this).attr('name') == 'certificateSpecialtys'){
                        var data = $(this).select2("data");
                        var name =[];
                        data.forEach(function(v){
                            name.push(v.text);
                        });
                        param[$(this).attr('name')+"Name"] = JSON.stringify(name);
                    }
                });
                if(!flag){
                    return false;
                }
                params.push(param);
            }
        });
        if(!flag && !flagMsg){
            return;
        }
        DGG.Confire("确认提交底单吗？", '提交', function () {
            DGG.loading();
            $.ajax({
                url: sysInfo.basePath + '/api/zzsc/under_order/save_under_order.do',
                data: {orderId:orderId, params:JSON.stringify(params)},
                type: "POST",
                dataType: "json",
                success: function (obj) {
                    if (obj.code != 0) {
                        DGG.Errors(obj.msg);
                        DGG.loading('close');
                    } else {
                        DGG.Succeed('操作成功！');
                        window.location.reload();
                    }
                }
            });
        })
    }

    //初始化证书类型
    function loadCertificateTypes(length, obj, generalType, type) {
        if (checkIsEmpty(type)) {
            DGG.Errors("请传入联动类型！");
            return false;
        }
        $.ajax({
            url: sysInfo.basePath + '/zs/certificate_type/get_certificate_type.do',
            data: {parentId:0, generalType:generalType},
            type: "POST",
            dataType: "json",
            async:false,
            success: function (result) {
                if (result.code == 0) {
                    $('select[name="certificateType"]').each(function (u,el) {
                        var dom =$(this);
                        $(this).find("option").remove();
                        $(this).append("<option value=''>请选择</option>");
                        $.each(result.data, function (i, item) {
                            dom.append("<option value='" + item.id + "' data-level='" + item.certificateLevel + "'>" + item.certificateName + "</option>");
                        });
                    })
                } else {
                    DGG.Errors(result.msg);
                }
            }
        });
        $('select[name="certificateType"]').each(function () {
            $(this).select2({
                placeholder: "请选择",
                allowClear: true,
                width: length,
                language: "zh-CN"
            });
        })
    }
</script>

